<script setup>
defineProps({
  tag: {
    type: String,
    default: "",
    required: true
  },
  title: {
    type: String,
    default: 'NONE',
  },
  content: {
    type: String,
    default: 'NONE'
  },
  code:{
    type: String,
    default: "NONE"
  },
  label: {
    type: String,
    default: "NONE"
  },
  custom:{
    type:Boolean,
    default:false
  }
})
</script>

<template>
  <el-tab-pane :label="tag">
    <template #label>
        <span class="custom-tabs-label">
          <span>{{tag}}</span>
          </span>
    </template>
    <div class="panel-container">
      <section class="panel" v-if="!custom">
        <h1>{{title}}</h1>
        <p>{{content}}</p>
        <pre>{{ code }}</pre>
        <label for="radio-1" class="demo-label">{{label}}</label>
        <label for="radio-2" class="demo-label">Toggle #radio-2</label>
      </section>
      <slot></slot>
    </div>
  </el-tab-pane>
</template>

<style scoped lang="scss">
.panel-container{
  padding-top: 3vh;
  min-height: 53vh;
  display: flex;
  justify-content: center;
}
.panel {
  min-width: 55%;

}
h1{
  font-size: 2em;
  font-weight: 300;
  margin: .67em 0;
  color: #c0392b;
}
p{
  line-height: 1.8;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
}
pre{
  padding: 12px;
  line-height: 1.6;
}
code, pre {
  color: #c0392b;
  background-color: #ecf0f1;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
}
label {
  background-color: #c0392b;
  color: white;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  margin: 0.5rem;
}
</style>